{% extends 'base.html' %}
{% load munkiwebadmin_extras %}

{% block extra_style %}
{% load static %}
<!--<link rel="stylesheet" href="{% get_static_prefix %}css/catalogs.css" type="text/css" media="all" />-->
<style>
.wraptext {
	table-layout: fixed;
	word-wrap: break-word;
}

.list {
	list-style: none; 
	padding: 0px; 
	margin: 0px;
}

.listborder {
	border-top: solid 1px #DDD;
}
</style>
{% endblock extra_style %}
{% block java_script %}
{% load static %}
<script type='text/javascript'>
  $(document).ready(function() {
	  var sizeCatalogsTableToFit = function() {
	    var h = $(window).height() - $("#catalog_items").offset().top - 30;
		  window.catalogsTable.fnSettings().oScroll.sY = h;
		  window.catalogsTable.fnDraw(false);
		};
		
    window.catalogsTable =  $('#catalog_items').dataTable({
          "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
          "bPaginate": false,
          "sScrollY": 0,
          "sScrollX": "100%",
          "bScrollCollapse": true,
          "bInfo": false,
          "bStateSave": true,
          "aaSorting": [[0,'asc']],
          "aoColumnDefs": [ 
                { "bSortable": false, "sWidth": "32%", "aTargets": [ 1 ] }
              ]
      });
		sizeCatalogsTableToFit();
		$(window).resize(function(){
			sizeCatalogsTableToFit();
		});
      $('.dropdown-toggle').dropdown();
  } );

	function getCatalogItem(catalog_name, catalog_index, item_name, item_version)     {
		var catalogItemURL = '/catalog/' + catalog_name + '/' + catalog_index + '/';
		$.get(catalogItemURL, function(data) {
			$('#catalog_item_detail').html(data);
		});
		$('.catalog_item[name="' + item_name + '"]').addClass('selected');
		$('.catalog_item[name!="' + item_name + '"]').removeClass('selected');
	}
</script>
{% endblock java_script %}

{% block content %}
<div class="row-fluid">
  <div class="span4">
    {% if catalog_name %}
	    {% if catalog %}
	      <div class='well'>
        <strong>Catalog:
        <span class='dropdown'>
          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            {{ catalog_name }} <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            {% for item in catalog_list %}
              <li><a href="/catalog/{{ item }}">{{ item }}</a></li>
            {% endfor %}
          </ul>
        </span></strong>
        </div>
		    <table class="table table-striped table-condensed wraptext" id='catalog_items'>
		      <thead>
		        <tr><th>Name</th><th>Version</th></tr>
		      </thead>
		      <tbody>
	          {% regroup catalog|dictsort:'name' by name as catalog_items %}
		        {% for item_name in catalog_items %}
			      <tr class='catalog_item' name='{{ item_name.grouper }}'>
  			      <td class='xlabel'>
  			      {% with item_name.list|dictsortreversed:'version' as item_list %}
  			        <a href='#' onClick="getCatalogItem('{{ catalog_name }}', '{{ item_list.0.index }}', '{{ item_name.grouper }}', '{{ item_list.0.version }}')">
  			      {% endwith %}
  				    {{ item_name.grouper|wrappable }}</a>
  			      </td>
  			      <td class='version'>
  			        <ul class='list'>
  				      {% for item in item_name.list|dictsortreversed:'version' %}
						{% if forloop.counter0 == 0 %}
  					      <li><a href='#' onClick="getCatalogItem('{{ catalog_name }}', '{{ item.index }}', '{{ item_name.grouper }}', '{{ item.version }}')">
  						    {{ item.version|wrappable }}</a>
  						  </li>
  						 {% else %}
  					      <li class='listborder'><a href='#' onClick="getCatalogItem('{{ catalog_name }}', '{{ item.index }}', '{{ item_name.grouper }}', '{{ item.version }}')">
  						    {{ item.version|wrappable }}</a>
  						  </li>
  						 {% endif %}
  				      {% endfor %}
  				    </ul>
  			      </td>
			      </tr>
		        {% endfor %}
		      </tbody>
	      </table>
	    {% else %}
	      <p>Catalog {{ catalog_name }} is empty.</p>
	    {% endif %}
    {% endif %}
  </div>
  <div class='span8'>
    <div id="catalog_item_detail"></div>
  </div>
</div>
{% endblock content %}
